问题
一位同学在for
循环里连续发送了4个ajax
请求,然后在success
的回调函数里使用了自增变量i
,但是i
值并不总能达到他的正确期望,经常出现问题。
我把这个问题同理描述为setTimeout
的使用:
// 代码一
for (var i = 0; i < 4; i++) {
setTimeout(function(){
console.log(i);
}, 0);
}
// 输出结果如下
// 4
// 4
// 4
// 4
原因
JavaScript是单线程执行的,setTimeout
函数会被放到任务队列里等待执行(即使等待时间为0),当for
循环执行完之后,i
的值已经变成了 4
ajax
请求的回调函数也是这样,加上同时发送多个请求,它们的返回顺序也并不总是和发送顺序一致。
解决方法
把setTimeout
或ajax
部分抽离成一个函数,然后传值调用它。这样在函数里会保存i
的一个副本,从而保证和期望效果一致。
// 代码二
function callback(temp){
setTimeout(function(){
console.log(temp);
}, 0);
}
for (var i = 0; i < 4; i++) {
callback(i);
}
// 输出结果如下
// 0
// 1
// 2
// 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。